<template>
  <div>
    <div>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddView" style="margin-bottom: 16px;">发布活动
      </el-button>
      <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteMany" style="margin-bottom: 16px;"
        :disabled="this.multipleSelection.length === 0">批量删除活动</el-button>
    </div>
    <div>

      <el-table @selection-change="handleSelectionChange" :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column fixed label="序号" align="center" type="index" :index="indexAdd" width="60">
        </el-table-column>
        <el-table-column fixed prop="activityName" align="center" label="活动名称" width="120">
        </el-table-column>
        <el-table-column prop="activityBeginTime" align="center" label="活动开始时间" width="160">
        </el-table-column>
        <el-table-column prop="activityEndTime" align="center" label="活动结束时间" width="160">
        </el-table-column>
        <el-table-column prop="totalPeoples" align="center" label="总人数" width="80">
        </el-table-column>
        <el-table-column prop="leader" align="center" label="负责人" width="80">
        </el-table-column>
        <el-table-column prop="leaderPhone" align="center" label="负责人电话" width="120">
        </el-table-column>
        <el-table-column prop="beSampleUnits" align="center" label="被采样单位" width="120">
        </el-table-column>
        <el-table-column prop="beSampleUnitsName" align="center" label="被采样单位负责人" width="120">
        </el-table-column>
        <el-table-column prop="beSampleUnitsPhone" align="center" label="被采样单位负责人电话" width="120">
        </el-table-column>
        <el-table-column prop="sampleUnits" align="center" label="采样单位" width="120">
        </el-table-column>
        <el-table-column prop="sampleUnitsName" align="center" label="采样单位负责人" width="120">
        </el-table-column>
        <el-table-column prop="sampleUnitsPhone" align="center" label="采样单位负责人电话" width="120">
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注" width="100">
        </el-table-column>
        <el-table-column prop="status" align="center" label="活动状态" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="info">未举行</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="success">举行中</el-tag>
            <el-tag v-else type="danger">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="deleteInfo(scope.$index, scope.row)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="showEditView(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="limitPage">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page.currentPage" :page-sizes="pageSizes" :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
    <div>
      <el-dialog title="编辑活动信息" :visible.sync="dialogVisible1" width="32%">
        <div>
          <span class="txt1">活动名称:</span>
          <el-input v-model="tblActivities.activityName" size="small" class="editActivities"></el-input><br>
          <span class="txt1">活动开始时间:</span>
          <el-input v-model="tblActivities.activityBeginTime" size="small" class="editActivities"></el-input><br>
          <span class="txt1">活动结束时间:</span>
          <el-input v-model="tblActivities.activityEndTime" size="small" class="editActivities"></el-input><br>
          <span class="txt1">总人数:</span>
          <el-input v-model="tblActivities.totalPeoples" size="small" class="editActivities"></el-input><br>
          <span class="txt1">负责人:</span>
          <el-input v-model="tblActivities.leader" size="small" class="editActivities"></el-input><br>
          <span class="txt1">负责人电话:</span>
          <el-input v-model="tblActivities.leaderPhone" size="small" class="editActivities"></el-input><br>
          <span class="txt1">被采样单位:</span>
          <el-select v-model="tblActivities.beSampleUnits" @change="changeUnitsSchool($event)" size="small"
            class="editActivities" placeholder="请选择单位">
            <el-option v-for="item in unitsListSchool" :key="item.unitsId" :label="item.name"
              :value="`${item.name}|${item.unitsId}`"></el-option>
          </el-select><br>
          <span class="txt1">被采样单位负责人:</span>
          <el-input v-model="tblActivities.beSampleUnitsName" size="small" class="editActivities"></el-input><br>
          <span class="txt1">被采样单位负责人电话:</span>
          <el-input v-model="tblActivities.beSampleUnitsPhone" size="small" class="editActivities"></el-input><br>
          <span class="txt1">采样单位:</span>
          <el-select v-model="tblActivities.sampleUnits" @change="changeUnitsHospital($event)" size="small"
            class="editActivities" placeholder="请选择单位">
            <el-option v-for="item in unitsListHospital" :key="item.unitsId" :label="item.name"
              :value="`${item.name}|${item.unitsId}`"></el-option>
          </el-select><br>
          <span class="txt1">采样单位负责人:</span>
          <el-input v-model="tblActivities.sampleUnitsName" size="small" class="editActivities"></el-input><br>
          <span class="txt1">采样单位负责人电话:</span>
          <el-input v-model="tblActivities.sampleUnitsPhone" size="small" class="editActivities"></el-input><br>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogVisible1 = false">取 消</el-button>
          <el-button size="small" type="primary" @click="updateInfo">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="发布活动" :visible.sync="dialogVisible2" width="32%">
        <div>
          <span class="txt1">活动名称:</span>
          <el-input v-model="tblActivities2.activityName" size="small" class="editActivities"></el-input><br>
          <span class="txt1">选择日期:</span>
          <el-date-picker v-model="DateYear" value-format="yyyy-MM-dd" type="date" size="small" class="editActivities"
            placeholder="选择日期">
          </el-date-picker><br>
          <span class="txt1">选择时间段</span>
          <el-time-picker size="small" class="editActivities" is-range value-format="HH:mm:ss.000Z" format="HH:mm"
            v-model="DateTime" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
          </el-time-picker>
          <span class="txt1">总人数:</span>
          <el-input v-model="tblActivities2.totalPeoples" size="small" class="editActivities"></el-input><br>
          <span class="txt1">负责人:</span>
          <el-input v-model="tblActivities2.leader" size="small" class="editActivities"></el-input><br>
          <span class="txt1">负责人电话:</span>
          <el-input v-model="tblActivities2.leaderPhone" size="small" class="editActivities"></el-input><br>
          <span class="txt1">被采样单位:</span>
          <el-select v-model="tblActivities2.beSampleUnits" @change="changeUnitsSchool($event)" size="small"
            class="editActivities" placeholder="请选择单位">
            <el-option v-for="item in unitsListSchool" :key="item.unitsId" :label="item.name"
              :value="`${item.name}|${item.unitsId}`"></el-option>
          </el-select><br>
          <span class="txt1">被采样单位负责人:</span>
          <el-input v-model="tblActivities2.beSampleUnitsName" size="small" class="editActivities"></el-input><br>
          <span class="txt1">被采样单位负责人电话:</span>
          <el-input v-model="tblActivities2.beSampleUnitsPhone" size="small" class="editActivities"></el-input><br>
          <span class="txt1">采样单位:</span>
          <el-select v-model="tblActivities2.sampleUnits" @change="changeUnitsHospital($event)" size="small"
            class="editActivities" placeholder="请选择单位">
            <el-option v-for="item in unitsListHospital" :key="item.unitsId" :label="item.name"
              :value="`${item.name}|${item.unitsId}`"></el-option>
          </el-select><br>
          <span class="txt1">采样单位负责人:</span>
          <el-input v-model="tblActivities2.sampleUnitsName" size="small" class="editActivities"></el-input><br>
          <span class="txt1">采样单位负责人电话:</span>
          <el-input v-model="tblActivities2.sampleUnitsPhone" size="small" class="editActivities"></el-input><br>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogVisible2 = false">取 消</el-button>
          <el-button size="small" type="primary" @click="commitActivities">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  name: "SysActivityManageGover",
  data() {
    return {
      DateYear: '',
      DateTime: ['', ''],
      sampleStatus_0: 0, // 0-学校单位
      sampleStatus_1: 1, // 1-医院单位
      unitsInfo: {},
      // 总数据
      tableData: [],
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: [4, 6, 8],
      page: {
        // 默认显示第几页
        currentPage: 1,
        // 默认每页显示的条数（可修改）
        pageSize: 6
      },
      unitsListSchool: [],
      unitsListHospital: [],
      multipleSelection: [],
      dialogVisible1: false,
      dialogVisible2: false,
      tblActivities: {
        activitiesId: 7,
        activityName: "核酸检测5",
        activityBeginTime: "2022-07-24 01:00:00",
        activityEndTime: "2022-07-24 04:00:00",
        totalPeoples: 500,
        remark: "无",
        leader: "某负责人",
        leaderPhone: "15179525180",
        beSampleUnits: "赣南医学院",
        beSampleUnitsId: 1,
        beSampleUnitsName: "某书记",
        beSampleUnitsPhone: "15179525180",
        sampleUnits: "附属医院",
        sampleUnitsId: 0,
        sampleUnitsName: "某科长",
        sampleUnitsPhone: "15179525180",
        status: 2
      },
      tblActivities2: {
        activitiesId: 0,
        activityName: "",
        activityBeginTime: "",
        activityEndTime: "",
        totalPeoples: '',
        remark: "",
        leader: "",
        leaderPhone: "",
        beSampleUnits: "",
        beSampleUnitsId: 0,
        beSampleUnitsName: "",
        beSampleUnitsPhone: "",
        sampleUnits: "",
        sampleUnitsId: 0,
        sampleUnitsName: "",
        sampleUnitsPhone: "",
        status: 0
      }
    }
  },
  mounted() {
    this.initActivitiesInfo();
  },
  methods: {
    // 实现表格序号自增
    indexAdd(index) {
      return index + 1 + (this.page.currentPage - 1) * this.page.pageSize;
    },
    changeUnitsSchool(e) {
      let [name, id] = e.split('|');
      this.tblActivities.beSampleUnitsId = id;
      this.tblActivities.beSampleUnits = name;
      this.tblActivities2.beSampleUnitsId = id;
      this.tblActivities2.beSampleUnits = name;
    },
    changeUnitsHospital(e) {
      let [name, id] = e.split('|');
      this.tblActivities.sampleUnitsId = id;
      this.tblActivities.sampleUnits = name;
      this.tblActivities2.sampleUnitsId = id;
      this.tblActivities2.sampleUnits = name;
    },
    initActivitiesInfo() {
      this.$axios.post("/gmu/tbl-activities/getAllActivitiesByPage", this.page).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.tblActivities;
          this.totalCount = res.data.data.total;
        }
      })
    },
    selectUnitsSchool() {
      this.$axios.post("/gmu/tbl-units/getAllUnitsByIsSample/" + this.sampleStatus_0).then(res => {
        if (res.data.code === 200) {
          this.unitsListSchool = res.data.data;
        }
      })
    },
    selectUnitsHospital() {
      this.$axios.post("/gmu/tbl-units/getAllUnitsByIsSample/" + this.sampleStatus_1).then(res => {
        if (res.data.code === 200) {
          this.unitsListHospital = res.data.data;
        }
      })
    },
    deleteMany() {
      this.$confirm('此操作将删除' + this.multipleSelection.length + '条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var activitiesIds = []
        this.multipleSelection.forEach(row => {
          activitiesIds.push(row.activitiesId)
        })
        this.$axios.delete("/gmu/tbl-activities/deleteRecord/" + activitiesIds).then(res => {
          if (res.data.code === 200) {
            this.initActivitiesInfo();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    deleteInfo(index, data) {
      this.$confirm('此操作将删除该条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete("/gmu/tbl-activities/deleteActivities/" + data.activitiesId).then(res => {
          if (res.data.code === 200) {
            this.initActivitiesInfo();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showEditView(index, data) {
      this.selectUnitsSchool();
      this.selectUnitsHospital();
      Object.assign(this.tblActivities, data);//使用拷贝，因为updatePos=data是同步的，在取消修改后表格中的值也会改变
      this.dialogVisible1 = true;
    },
    showAddView() {
      this.selectUnitsSchool();
      this.selectUnitsHospital();
      this.dialogVisible2 = true;
    },
    commitActivities() {
      this.tblActivities2.activityBeginTime = this.DateYear + ' ' + this.DateTime[0];
      this.tblActivities2.activityEndTime = this.DateYear + ' ' + this.DateTime[1];
      let BeginTimeInt = parseInt(this.DateTime[0].substring(0, 3));
      let EndTimeInt = parseInt(this.DateTime[1].substring(0, 3));
      if ((BeginTimeInt <= 12 && EndTimeInt <= 12) || (BeginTimeInt > 12 && EndTimeInt > 12)) {
        this.$axios.post("/gmu/tbl-activities/commitActivities", this.tblActivities2).then(res => {
          if (res.data.code === 200) {
            this.tblActivities2 = {};
            this.dialogVisible2 = false;
            this.initActivitiesInfo();
          }
        })
      } else {
        this.$message.error('时间段只允许在12点前后');
      }
    },
    updateInfo() {
      this.$axios.put("/gmu/tbl-activities/updateActivities", this.tblActivities).then(res => {
        if (res.data.code === 200) {
          this.initActivitiesInfo();
          this.dialogVisible1 = false;
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.page.pageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.initActivitiesInfo();
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.page.currentPage = 1;
    },
    handleCurrentChange(val) {
      console.log(val)
      // 改变默认的页数
      this.page.currentPage = val;
      // 切换页码时，要获取每页显示的条数
      this.initActivitiesInfo();
    }
  }

}
</script>

<style scoped>
.editActivities {
  width: 240px;
  margin-left: 8px;
  margin-top: 5px;
}

.txt1 {
  border: 2px solid #409EFF;
  color: white;
  background-color: #409EFF;
  font-weight: bold;
  border-radius: 4px;
  padding: 4px;
  display: inline-block;
  width: 150px;
  text-align: center;
}
</style>
